<%@ page contentType="text/html;charset=iso-8859-1" language="java" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title><spring:message code="WEBTITLE"/></title>
    <%@ include file="../include/style.jsp" %>
    <%@ include file="../include/script.jsp" %>
<%--     <link rel="stylesheet" href="<%=scriptPageContext %>/static/css/jquery.Jcrop.css"/> --%>
    <link rel="stylesheet" href="<%=scriptPageContext %>/static/css/social-buttons-3.css"/>
    
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/uploadImage/jquery.fileupload.js"></script>
    
<%--     <script type="text/javascript" src="<%=scriptPageContext %>/static/js/jCrop/jquery.Jcrop.min.js"></script> --%>
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/register.js"></script>
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/uploadImage/uploadImage.js"></script>
<%--     <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/uploadImage/fileselecthandler.js"></script> --%>
<%--     <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/viewModel/avatar-viewmodel.js"></script> --%>
    
    <script type="text/javascript">
    	var spinner = new SpinnerViewModel("#spinnerContainer");
    
    	function AvatarViewModel() { 
    		var self = this;
    		self.avatarName = ko.observable();
    		self.avatarPath = ko.computed(function(){
    			if(self.avatarName()){
    				return getImagePath('image/temp', self.avatarName());
    			}
    			
    			return getImagePath('image/avatarThumb', 'defaultAvatar.jpg');
    		});
    		self.uploadImage = new UploadImage("#inputAvatarFile", self.avatarName);
    	}
    	$(function() {
        	$("#birthdayInputRegister").datepicker({
        		maxDate: "0",
        		changeMonth: true,
        	    changeYear: true,
        	    yearRange: "-100:-0",
        	    dateFormat: 'dd/mm/yy'});
        	
        	$("#registerLink").addClass("hidden");
        	
        	ko.applyBindings(new AvatarViewModel(), $("#avatarContent")[0]);
        	
//         	avatarViewModel = new AvatarViewModel('image/temp', 'image/uploadCrop');
//         	ko.applyBindings(avatarViewModel, $("#avatarContent")[0]);
      	});
    </script>
</head>
<body>

	<%@ include file="../include/top-public.jsp" %>

	<div class="container register">	

		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12"><h3 class="title product"><i class="icon-signin"></i> <spring:message code="LOGIN_TO_SYSTEM"/></h3></div>
		</div>

		<div class="row log">
	    	<div class="col-md-12 col-lg-12">
	    		<form class="form-horizontal" role="form" method="post" action="j_spring_security_check">
	        		<div class="col-xs-12 col-md-4">
					  <div class="form-group">
					    <label for="emailInputLogin" class="control-label"><spring:message code="EMAIL"/></label>
					    <input type="text" class="form-control" name='j_username' id="emailInputLogin" placeholder="Email">			    
					  </div>
					  <div class="form-group">				    
					      <div class="checkbox">
					        <label>
					          <input type="checkbox" class="remember" name="_spring_security_remember_me"> <spring:message code="REMEMBER_ME"/> 
					          <a href="javascript:void(0);" onclick="$('#passwordForgotenPopin').modal('show');" class="btn btn-link pull-right"><spring:message code="FORGOT_PASSWORD"/></a>
					        </label>
					      </div>				    
					  </div>
					</div>
					<div class="col-xs-12 col-md-4 col-md-offset-1">		
					  <div class="form-group">
					    <label for="passwordInputLogin" class="control-label"><spring:message code="PASSWORD"/></label>
					    <input type="password" class="form-control" name='j_password' id="passwordInputLogin" placeholder="Password">
					  </div>
					</div>
					<div class="col-xs-12 col-md-2 col-md-offset-1">
					    <button type="submit" class="btn btn-default btn-login"><spring:message code="LOGIN"/></button>	  
					</div>

					<div class="clearfix"></div>

					<c:if test="${not empty param.error }">
					  <div class="alert alert-danger col-md-12">
				        <strong>Ups!</strong> <spring:message code="EMAIL_PASSWORD_WRONG"/>.. <spring:message code="TRY_AGAIN"/>.
				      </div>
			      </c:if>			    
	            </form>
	        </div>
	    </div>

		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12"><h3 class="title login"><i class="icon-edit"></i> <spring:message code="REGISTER"/></h3></div>
		</div>

    <div class="row">
    	<div class="col-xs-12 col-sm-12 col-md-12" id="avatarContent">
    		<form:form class="form-horizontal" role="form" modelAttribute="personAttribute" method="POST" action="register_new" id="inscriptionForm">
            	<div class="col-xs-12 col-md-3">
				  <div class="form-group">
				  	  <label for="avatarInputRegister" class="control-label"><spring:message code="AVATAR"/></label>
					  <div class="input-group">
					  	<form:hidden path="avatarPath" data-bind="attr: { value: avatarName }" name ="sustainablemarket" id="avatarPath" />
					  	<div class="form-group loadImage">
		                    <span class="btn btn-default btn-file">
		                        <spring:message code="LOAD_IMAGE"/><input type="file" id="inputAvatarFile" name="file" data-url="<%=headerPageContext %>/image/uploadTempAvatar">
		                    </span>                    
		                </div>
					  	
<!-- 					  	<div class="form-group loadImage"> -->
<!-- 		                    <a href="javascript:$('#file-label').click()"> -->
<!-- 			                    <span class="btn btn-default btn-file"> -->
<%-- 			                    	<spring:message code="LOAD_IMAGE"/> --%>
<!-- 								</span> -->
<!-- 							</a> -->
<!-- 		                </div> -->
					  </div>
					  <div class="col-md-10 blkAvatar">
					  <div id="spinnerContainer"></div>
						<img src="" data-bind="attr: { src: avatarPath }" alt="avatar" class="img-responsive">
					  </div>
				  </div>
				  <div class="form-group">
				  <label class="control-label"><spring:message code="GENRE"/></label>
					  <div class="radio">
						<form:radiobutton path="genre" value="M" id="maleGenreRegister" checked="checked"/><label for="maleGenreRegister"><spring:message code="MALE"/></label>
					  </div>
					  <div class="radio">
						<form:radiobutton path="genre" value="F" id="femaleGenreRegister"/><label for="femaleGenreRegister"><spring:message code="FEMALE"/></label>
					  </div>
				  </div>
			    </div>
        		<div class="col-xs-12 col-md-4 col-central">
				  <div class="form-group">
				    <label for="nameInputRegister" class="control-label"><spring:message code="NAME"/></label> <span class="required">*</span>
				    <form:input path="name" class="form-control" id="nameInputRegister" maxlength="60" placeholder="Nombre" type="text"/>
				  </div>
				  <div class="form-group">
				    <label for="surnameInputRegister" class="control-label"><spring:message code="SURNAME"/></label> <span class="required">*</span>
				    <form:input path="surname" class="form-control" id="surnameInputRegister" maxlength="60" placeholder="Apellido" type="text"/>
				  </div>
				  <div class="form-group">
				    <label for="addressInputRegister" class="control-label"><spring:message code="ADDRESS"/></label>
					<form:input path="address" class="form-control" id="addressInputRegister" maxlength="250" placeholder="Direccion" type="text"/>
				  </div>
				  <div class="form-group">
				    <label for="phoneInputRegister" class="control-label"><spring:message code="PHONE"/></label> <span class="required">*</span>
					<form:input path="phone" class="form-control" id="phoneInputRegister" maxlength="20" placeholder="Telefono" type="text"/>
				  </div>
				</div>
        		<div class="col-xs-12 col-md-4">
        		  <div class="form-group">
				    <label for="birthdayInputRegister" class="control-label"><spring:message code="BIRTHDAY"/></label> <span class="required">*</span>
					<form:input path="birthdayString" class="form-control" id="birthdayInputRegister" placeholder="Fecha de nacimiento" type="text"/>
				  </div>	
				  <div class="form-group">
				    <label for="emailInputRegister" class="control-label"><spring:message code="EMAIL"/></label> <span class="required">*</span>
					<form:input path="email" class="form-control" id="emailInputRegister" maxlength="60" placeholder="Email" type="text"/>
				  </div>
				  <div class="form-group">
				    <label for="passwordInputRegister" class="control-label"><spring:message code="PASSWORD"/></label> <span class="required">*</span>
					<form:password path="password" class="form-control" id="passwordInputRegister" maxlength="20" placeholder="Password"/>
				  </div>
				  <div class="form-group">
				    <label for="confirmPasswordInputRegister" class="control-label"><spring:message code="CONFIRM_PASSWORD"/></label> <span class="required">*</span>
					<input name="confirmPassword" class="form-control" id="confirmPasswordInputRegister" maxlength="20" type="password" placeholder="Password"/>
				  </div>
				  
				  <!--<div class="form-group">				    
				      <div class="checkbox">
				        <label>
				          <input type="checkbox" class="remember"> Acepto los <a href="#" class="btn btn-link">Terminos y condiciones</a>
				        </label>
				      </div>
				  </div>-->
				  <div class="form-group">
				    <div class="pull-right">
				      <button type="submit" class="btn btn-default"><spring:message code="REGISTER"/></button>
				    </div>
				  </div>
				  
				  <c:if test="${not empty param.existingEmailError }">
					  <div class="alert alert-danger col-lg-offset-2 col-lg-10">
				        <strong>Ups!</strong> <spring:message code="MAIL_USED_ERROR"/>.<br> <spring:message code="TRY_AGAIN_OTHER_EMAIL"/> <a href="#"><spring:message code="RETRIEVE_PASSWORD"/></a>.
				      </div>
			      </c:if>
            	</div>
        	</form:form>
        	
<%--         	<%@ include file="../templates/popins/ImageCropPopin.jsp" %> --%>
        </div>
    </div>
    
	<%@ include file="../include/footer.jsp" %>

</div>

</body>
</html>